<template>
  <view style="overflow: scroll">
    <image class="base-img" :src="reviewBaseImg" mode="widthFix"></image>
    <tn-button id="print_btn" @click="cusRenderDom" class="btn">打印</tn-button>

    <sp-html2pdf-render
        domId="render-dom"
        ref="renderRef"
        :showLoading="false"
        @beforeSavePDF="beforeSavePDF"
        @renderOver="renderOver"
        :auto-open="false"
    ></sp-html2pdf-render>
    <view id="render-dom">
      <view class="table" v-for="(page, index) in formatList" :key="index">
        <!--首页-->
        <view v-if="index===0">
          <view class="title">谈话记录</view>
          <view class="sub-title">案号：{{ jsonData.questionIds }}</view>
          <view class="content-text">

            <view class="tn-flex tn-flex-row-between">
              <view class="tn-flex">
                <view>时间:</view>
                <view class="unline" style="width: 240px;">{{ comStartTime }}</view>
                <view>至</view>
                <view class="unline" style="width: 240px;">{{  comEndTime }}</view>
              </view>

              <view class="tn-float-right">
                <text>第</text>
                <text class="unline">{{jsonData.enquireIndex +1}}</text>
                <text>次谈话</text>
              </view>
            </view>

            <view class="tn-flex">
              <view>地点:</view>
              <view class="unline" style="display: inline-block;flex: 1;">{{ jsonData.askLocation }}</view>
            </view>

            <view class="tn-flex">
              <view>谈话人:</view>
              <view v-for="user in jsonData.doc.officerList" class="tn-flex w-14">
                <view class="unline tn-flex-1">{{ user.name }}</view>
                <view>、</view>
              </view>
              <view v-for="user in 4-jsonData.doc.officerList.length" class="tn-flex w-14">
                <view class="unline tn-flex-1">/</view>
                <view>、</view>
              </view>
              <view>记录人:</view>
              <view class="unline" style="width: 145px;">{{ comJiLuRen }}</view>
            </view>


            <view class="tn-flex">
              <view>被谈话人:</view>
              <view class="unline" style="width: 220px">{{ jsonData.name || '/' }}</view>
              <view>与案件关系:</view>
              <view class="unline" style="width: 230px">{{ jsonData.relation || '/' }}</view>
            </view>


            <view class="tn-flex">
              <view>性别:</view>
              <view class="unline" style="width: 260px;">{{ jsonData.gender === 1 ? '男' : '女' }}</view>
              <view>年龄:</view>
              <view class="unline" style="width: 290px">
                {{ jsonData.age === 0 ? '/' : jsonData.age }}
              </view>
            </view>


            <view class="tn-flex">
              <view>身份证件号:</view>
              <view class="unline" style="width: 200px">{{ jsonData.idcardNum || '/' }}</view>
              <view>联系电话:</view>
              <view class="unline" style="width: 250px">{{ jsonData.telephone || '/' }}</view>
            </view>


            <view class="tn-flex">
              <view>工作单位及职务:</view>
              <view class="unline tn-flex-1">{{(jsonData.companyName + jsonData.job) || '/' }}</view>
            </view>

            <view class="tn-flex">
              <view>联系地址:</view>
              <view class="unline" style="width: 560px">
                {{ jsonData.conAddr || '/' }}
              </view>
            </view>
            <view style=" margin-bottom: 15px;line-height:30px;">
              <view>我们是河北高速公路集团有限公司
                <label style="display:inline;">{{ jsonData.doc.departName }}</label>
                的
                <label v-for="(user, index) in jsonData.doc.officerList">
                  <text v-show="index">、</text>
                  {{ user.name }}</label>
                ，现向你进行谈话了解情况，请如实回答所问问题。
              </view>
            </view>

          </view>

        </view>

        <!--        附页-->
        <view v-else>
          <view class="title" style="padding-bottom: 48px;">谈话记录（附页）</view>
        </view>

        <!-- 问答循环-->
        <view>
          <view v-for="(item, _i) in page" :key="_i" style="font-size: 20px;" class="text-padding">
            <view class="unline" style="width: 100%;">{{ item }}</view>
          </view>
        </view>

        <view style="position: absolute;bottom: 10px;width: 100%;font-size: 20px;">
          <!--        签字-->
          <view style="line-height: 30px;margin-top: 40px;">
            <view class="tn-flex tn-flex-row-between qianzi">
              <view style="width: 200px;">
                <view>被谈话人签名及时间：</view>
                <view class="unline">
                  <img style="width: 100%;height: 39px;float: left;" v-if="jsonData.enquireIndex ===0" :src="jsonData.btr"/>
                  <img style="width: 100%;height: 39px;float: left;" v-if="jsonData.enquireIndex ===1" :src="jsonData.btr2"/>
                  <img style="width: 100%;height: 39px;float: left;" v-if="jsonData.enquireIndex ===2" :src="jsonData.btr3"/>
                  <img style="width: 100%;height: 39px;float: left;" v-if="jsonData.enquireIndex ===3" :src="jsonData.btr4"/>
                </view>
              </view>
              <view class="tn-flex">
                <view>谈话人签名及时间：</view>
                <view style="width: 200px;">
                  <view class="unline">
                    <img v-if="jsonData.thr1" style="width: 100%;height: 39px;float: left;" :src="jsonData.thr1"/>
                  </view>
                  <view class="unline">
                    <img v-if="jsonData.thr2" style="width: 100%;height: 39px;float: left;" :src="jsonData.thr2"/>
                  </view>
                  <view class="unline">
                    <img v-if="jsonData.thr3" style="width: 100%;height: 39px;float: left;" :src="jsonData.thr3"/>
                  </view>
                  <view class="unline">
                    <img v-if="jsonData.thr4" style="width: 100%;height: 39px;float: left;" :src="jsonData.thr4"/>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view>
            备注： {{ jsonData.doc.enquireList[0].remark || '/' }}
          </view>

          <view class="tn-text-center" style="margin-top: 10px;">
            第{{ index + 1 }}页（共{{ formatList.length }}页）
          </view>
        </view>

      </view>
    </view>

  </view>
</template>

<script>
import {base64ToPath, urlToBase64} from "@/uni_modules/sp-html2pdf-render/utils";
import logo from "@/static/logo.png"
import {base64ToFile} from "@/utils/typeConversion";
import {getToken} from "@/utils/auth";
import {formatData} from "@/pages/roadCompensation/tanhuajilu/formatData";
import {addDocPhoto, delDocPhoto, uploadLp} from "@/api/lupeiwenshu";
import {formatDate_dayjs, formatDate_nianyuerishifenmiao} from "@/utils/formatData";

export default {
  props: {
    jsonData: {
      type: Object,
      default: {
        questionsList: []
      }
    }
  },
  data() {
    return {
      noCodeImg: true,
      reviewBaseImg: '',
      webImageBase: '',
      locImageBase: ''
    };
  },
  created() {
    this.handleImage()
  },
  computed: {
    formatList() {
      if (!this.jsonData.questionsList) return [];
      return formatData(this.jsonData.questionsList)
    },
    comJiLuRen() {
      return this.jsonData.doc?.recodeTOfficer?.name || '/'
    },
    comStartTime() {
      if(this.jsonData?.startTime){
        return formatDate_dayjs(this.jsonData.startTime,'YYYY-MM-DD HH:mm:ss', 'YYYY年MM月DD日HH时mm分')
      }else {
        return '/'
      }
    },
    comEndTime() {
      if(this.jsonData?.endTime){
        return formatDate_dayjs(this.jsonData.endTime,'YYYY-MM-DD HH:mm:ss', 'YYYY年MM月DD日HH时mm分')
      }else {
        return '/'
      }
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
    },
    handleImage() {
      /**
       * 使用urlToBase64将图片转换为base64格式，
       * 若图片不支持跨域则可能会报toDataURL on HTMLCanvasElement的错
       * 在hbuilderx内置浏览器中可能不会跨域，因为内置浏览器解除了跨域限制
       * 终极大法是将网络图片通过工具转换为base64保存至文件中再放入image标签里
       */
      // urlToBase64('https://mp-0ecede5c-a993-48bf-ba4b-45d9a8c7e79b.cdn.bspapp.com/resource/qqqun.jpg').then((res) => {
      //   this.webImageBase = res
      // })
      urlToBase64(logo).then((res) => {
        this.locImageBase = res
      })
    },
    cusRenderDom() {
      this.noCodeImg = false
      this.$refs.renderRef.h2pRenderDom()
    },
    cusRenderDomNoCodeImg() {
      this.noCodeImg = true
      this.$refs.renderRef.h2pRenderDom()
    },
    renderOver(e) {
      // e为导出的图片（base64）
      // console.log('e', e);
      const file = base64ToFile(e, 'fjtp', 'png');
      console.log(file)
      base64ToPath(e).then(path => {
        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return
        delDocPhoto({
          "id": this.$root.$route.query.id,
          "type": 1,
        }).then(res => {
          console.log('res', res)
          uploadLp({
            filePath: e
          }).then(res => {
            addDocPhoto({
              "fileUrl": res.data.url,
              "typeNum": 1,
              "typeName": "谈话记录",
              "docId": this.$root.$route.query.id,
            }).then(result => {
              this.$emit('upload', {...res, path, noCodeImg: this.noCodeImg})
            })
          }).catch(err => {
            console.log('err', err)
            this.$emit('upload', {code: 500})
          })
        })

      })
    },
    beforeSavePDF(e) {
      // e为导出的pdf（base64）
      // console.log('==== beforeSavePDF :', e);
      return
      const file = base64ToFile(e, 'jzjp021212.pdf', 'pdf');
      base64ToPath(e).then(path => {
        this.$emit('upload', {
          ...{
            code: 0,
            data: {
              url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
            }
          },
          path
        })
        return
        uploadLpPdf({
          file,
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })
      })

    },
  }
};
</script>
<style scoped lang="scss">
$text-padding: 6px 0px;
#render-dom {
  width: 794px;
  font-family: "宋体";
  padding: 0 70px;
  color:#000;
  .table {
    position: relative;
    height: 1123px;
    border: 1px solid rgba(7, 7, 7, 0);
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 22px;
    text-align: center;
  }

  .sub-title {
    margin-top: 48px;
    font-size: 16px;
    text-indent: 45%;
  }

  .unline {
    border-bottom: 1px solid #000;
  }

  .content-text {
    margin-top: 24px;
    font-size: 20px;

    & > view {
      padding: $text-padding;
    }
  }

  .w-14 {
    width: 14%;
  }

  .text-padding {
    padding: $text-padding;
  }

  .qianzi {
    .unline {
      height: 40px;
    }
  }
}
</style>
